<template>
  <div class="container">
    <el-container>
      <el-header>
        <div>
          <img src="../assets/images/navlogo.png" alt=""/>
          <span>盈利宝后台管理系统</span>
        </div>
        <div>
          <el-button @click="logout">注销</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              :default-active="activePath"
              text-color="#fff"
              @open="handleOpen"
              @close="handleClose"
              :router="true"
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon><location /></el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/index/user" @click="savePath">用户列表</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from 'element-plus';

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

// 激活的路径
const activePath = ref("/index/user");

// 获取当前路由信息
const route = useRoute();

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose =  (key, keyPath) => {
  console.log(key, keyPath)
}

const savePath = (event) => {
  // console.log(event);
  const currentPath = event.index;
  console.log(currentPath);
  window.sessionStorage.setItem("activePath", currentPath);
};

// 注销
const logout = () => {
  ElMessageBox.confirm(
      '您确认注销当前账号吗?',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        // 删除sessionStorage中的token
        window.sessionStorage.removeItem("token");
        ElMessage({
          type: 'success',
          message: '注销成功',
        });
        // 跳转到登录页面
        window.location.href = '/login';
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消注销',
        })
      });
};

onMounted(() => {
  console.log(route);
  console.log(route.path);
  window.sessionStorage.setItem("activePath", route.path);
  activePath.value = window.sessionStorage.getItem("activePath");
});

</script>

<style scoped>
.container {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
.container .el-container .el-header {
  padding: 0px 15px;
  margin: 0px;
  height: 60px;
  width: 100%;
  background-color: #545c64;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container .el-container .el-header div{
  display: flex;
  align-items: center;
}
.container .el-container .el-header div img {
  border-radius: 50%;
}
.container .el-container .el-header div span {
  color: white;
  font-size: 20px;
  margin-left: 15px;
}

.container .el-container {
  height: 100%;
}

.container .el-container .el-container {
  height: 100%;
}
.container .el-container .el-container .el-aside {
  height: 100%;
}

.el-menu-vertical-demo {
  height: 100%;
}
</style>